<template>
  <div>
    <div class="player-container">
      <vue-core-video-player
        ref="VideoPlayer"
        :src="get_VIDEO_URL"
        :cover="poster"
        :muted="true"
        preload="metadata"
        :autoplay="false"
        :title="title"
      ></vue-core-video-player>
    </div>
  </div>
</template>

<script>
import HLSCore from "@core-player/playcore-hls";
export default {
  name: "Video",
  props: {
    title: {
      type: String,
      default: "",
    },
    poster:{
      type:String,
      default:""
    }
  },
  data() {
    return {
      HLSCore,
    };
  },
  computed: {
    // 视屏的url
    get_VIDEO_URL() {
      return this.$store.state.videoMvState.videoSrc;
    },
    // //视屏的封面
    // get_POSTER_URL() {
    //   return this.$store.state.videoMvState.posterUrl;
    // },
  },
  watch: {
    get_VIDEO_URL(newVal, oldVal) {
      if (oldVal !== newVal) {
        this.$refs("VideoPlayer").reload();
      }
    },
    // get_POSTER_URL: (newVal) => {
    //   this.get_POSTER_URL = Object.assign({}, this.get_POSTER_URL, newVal);
    // },
  },
};
</script>

<style lang="scss" scoped></style>
